<template>
  <div
    class="auto-1624202351998 m-layer z-show m-layer-w2"
    :style="[{ top: top }, { left: '400px' }]"
    v-if="flag"
    ref="scbox"
  >
    <div class="zbar">
      <div class="zttl f-thide" @mousedown.stop="move">添加到歌单</div>
    </div>
    <div class="zcnt">
      <div class="lyct lyct-1 m-favgd f-cb">
        <div class="tit j-flag">
          <i class="u-icn u-icn-33"></i>
          新歌单
        </div>
        <!-- 加载 -->
        <div class="u-load s-fc4" v-if="loading_flag">
          <i class="icn"></i>
          加载中...
        </div>
        <!-- 我的歌单列表 -->
        <ul>
          <li
            class="xtag"
            v-for="(item, index) in userList"
            :key="index"
            @click="addmic(item.id, index)"
          >
            <div class="item f-cb">
              <div class="left">
                <a href="javascript:;" class="avatar">
                  <img alt="" :src="item.coverImgUrl" />
                </a>
              </div>
              <p class="name f-thide">
                <a href="javascript:;" class="s-fc0">{{ item.name | name }}</a>
              </p>
              <p class="s-fc3">{{ item.trackCount }}首</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <span class="zcls" title="关闭窗体" @click="flag = false">×</span>
  </div>
</template>
<script>
var ids = [];

import { playlist_tracks } from "../../network/song";
import { playlist_detail } from "../../network/login";
import { userPlaylist } from "../../network/login";
import store from "../../store/index";
export default {
  data() {
    return {
      flag: false,
      top: "", //定位的top值
      userList: [], //渲染我创建的歌单列表数据
      subMusic: {playlistId:null , subMS:null}, //传过来歌曲的id
      loading_flag:true //加载
    };
  },
  filters: {
    name(v) {
      var nickName = window.sessionStorage.getItem("nickName");
      return v.replace(nickName, "我");
    },
  },
  methods: {
    move(e) {
      //拖动整个收藏栏
      var x = e.pageX - this.$refs.scbox.offsetLeft;
      var y = e.pageY - this.$refs.scbox.offsetTop;
      var _this = this;
      document.addEventListener("mousemove", Boxmove);
      function Boxmove(e) {
        _this.$refs.scbox.style.left = e.pageX - x + "px";
        _this.$refs.scbox.style.top = e.pageY - y + "px";
      }
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", Boxmove);
      });
    },
    addmic(id, index) {
      //添加歌曲到歌单
      playlist_detail(id).then((res) => {
        //遍历 我创建的歌单
        this.subMusic.playlistId = id;
        var replace = res.data.playlist.tracks.some((i) => {
          return i.id == this.subMusic.subMS.id;
        });
        if (replace) {
          //歌曲已存在
          this.flag = false;
          this.$Alter.show("歌曲已存在", 2000);
          return;
        } //添加到我的歌单
        playlist_tracks("add", id, this.subMusic.subMS.id).then((res) => {
          if (res.data.status == 200) {
            store.commit("submusic", this.subMusic);
            this.flag = false;
          }
        });
      });
    },
    isshow(y, subMS) {
      //展开收藏栏
      this.flag = true;
      this.top = y + "px";
      this.subMusic.subMS = subMS;
      this.res_data();
    },
    res_data() {
      //得到我的音乐单
      var uid = store.state.userId;
      if(uid){
          userPlaylist(uid).then((res) => {
            this.userList = res.data.playlist.filter((item) => {
              return item.userId == uid;
            });
            this.$nextTick(() => {
               this.loading_flag = false
            })
          });
       }
    },
  },
};
</script>
<style scoped>
div.m-layer-w2 {
  width: 480px;
}
div.m-layer {
  position: absolute;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
  border: none;
  background: #fff;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
div.m-layer .zbar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  background: #2d2d2d;
}
.auto-1624202351998 .zbar {
  line-height: 30px;
}
div.m-layer .zttl {
  padding-right: 45px;
  margin: 0;
  height: 38px;
  line-height: 38px;
  padding-left: 18px;
  border-radius: 3px 3px 0 0;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-position: 50% 0;
  cursor: move;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
div.m-layer div.zcnt {
  padding: 0;
  border: 1px solid #878787;
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  background: #fff;
}
div.m-layer .lyct-1 {
  padding: 0;
}
.m-favgd {
  overflow-y: auto;
  height: 374px;
}
.m-favgd .tit {
  padding: 10px 0 10px 35px;
  background: #e6e6e6;
  cursor: pointer;
}
.m-favgd .u-icn-33 {
  margin-right: 10px;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../assets/imgs/icon.png") no-repeat 0 9999px;
}
.u-icn-33 {
  width: 35px;
  height: 36px;
  background-position: 0 -495px;
}
em,
i {
  font-style: normal;
  text-align: left;
  font-size: inherit;
}
.m-favgd ul * {
  cursor: pointer;
}
.m-favgd ul li {
  padding: 6px 0 6px 35px;
  border-top: 1px solid #e0e0e0;
}
.m-favgd ul li:hover {
  background-color: #fbf8f8;
}
.m-favgd ul .item {
  padding-left: 50px;
}
.f-cb::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.m-favgd ul .left {
  display: inline;
  float: left;
  margin-left: -50px;
  overflow: hidden;
  width: 40px;
}
.m-favgd ul .avatar {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
}
.m-favgd ul .avatar img {
  width: 40px;
  height: 40px;
}
.m-favgd ul .name {
  margin-top: 2px;
  margin-bottom: 8px;
}
.m-favgd ul p {
  word-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
header,
menu,
section,
p {
  padding: 0;
  margin: 0;
}
.s-fc0,
a.s-fc0:hover {
  color: #000;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
div.m-layer .zcls {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 10px;
  height: 10px;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  background: url("https://s2.music.126.net/style/web2/img/layer/layer.png?772608a45c8377a6cca34e27a39998f9")
    no-repeat;
  background-position: 0 -95px;
  z-index: 20;
}
.u-load {
    height: 26px;
    padding: 20px 0;
    text-align: center;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.u-load .icn {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    vertical-align: middle;
    background: url("https://s2.music.126.net/style/web2/img/loading.gif?fbd7f1b6de058de61e25933570746cb3") no-repeat;
}
</style>